<template>
  <div id="root">
    <div id="left-box">
      <div id="button-box">
        <el-card>
          <el-button type="success" @click="handleQuery">成绩查询</el-button>
        </el-card>
      </div>
      <el-card>
        <el-row :gutter="20">
          <div>
            <el-col :span="6" v-for="(item, index) in subjectDetails" :key="index">
              <el-card id="subject-card">
                <div>学科名称</div>
                <span>{{ item.subject.name }}</span>
                <div>任课教师</div>
                <span>{{ item.user.userName }}</span>
              </el-card>
            </el-col>
          </div>
        </el-row>
      </el-card>
    </div>
    <div id="right-box">
      <el-card>
        <el-row :gutter="20">
          <div>
            <el-col :span="8" v-for="(item, index) in examPaperDetails" :key="index">
              <el-card id="examPaper-card">
                <div>试卷名称</div>
                <span>{{ item.examPaper.name }}</span>
                <div>题数</div>
                <span>{{ item.examPaper.questionCount }}</span>
                <div>总分</div>
                <span>{{ item.examPaper.score }}</span>
                <div>开始时间</div>
                <span>待定</span>
                <div>结束时间</div>
                <span>待定</span>
                <div id="opt-box">
                  <el-button type="primary"
                             v-if="item.examPaperAnswer === null"
                             @click="handleExam(item.examPaper)"
                             size="mini">
                    开始考试
                  </el-button>
                  <span v-if="item.examPaperAnswer !== null">
                    已完成
                  </span>
                </div>
              </el-card>
            </el-col>
          </div>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import {mapActions, mapState} from "vuex";

export default {
  name: 'Home',
  mounted() {
    const subUrl = "/student/home/card/subjects";
    const epUrl = "/student/home/card/examPapers";
    const params = {
      userId: this.currentUser.userId,
    };
    this.axios.get(subUrl, {params}).then(resp => {
      this.subjectDetails = resp.data;
    });
    this.axios.get(epUrl, {params}).then(resp => {
      this.examPaperDetails = resp.data;
    });
  },
  computed: {
    ...mapState(['currentUser'])
  },
  data() {
    return {
      subjectDetails: [],
      examPaperDetails: [],
    }
  },
  methods: {
    handleQuery() {
      this.$router.push({name: 'ScorePage'})
    },
    handleExam(item) {
      this.$router.push({
        name: 'Exam', params: {
          examPaperId: item.id,
          examPaperName: item.name,
        }
      })
    }
  },
}
</script>

<style scoped>
#root {
  display: flex;
}

#left-box {
  flex: 1;
  margin: 20px;
}

#right-box {
  flex: 1;
  margin: 20px;
}

#button-box {
  margin-bottom: 20px;
}

#subject-card {
  margin-bottom: 1em;

  div {
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 8px;
  }
}

#examPaper-card {
  margin-bottom: 1em;

  div {
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 8px;
  }
}

#opt-box {
  span {
    color: #1482f0;
  }
}

</style>